{extend name="layout:base" /}

{block name="main"}

{:import_addon_public('css/dropzone.min.css')}
<div class="path">
    <div class="card mb-2 fm-upload-wrapper {:fm_get_theme()}">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#fileUploader" data-target="#fileUploader"><i class="fa fa-arrow-circle-o-up"></i> <?php echo lng('UploadingFiles') ?></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#urlUploader" class="js-url-upload" data-target="#urlUploader"><i class="fa fa-link"></i> <?php echo lng('Upload from URL') ?></a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <p class="card-text">
                <a href="{:addon_url('admin/index/index', ['p' => FM_PATH])}" class="float-right text-dark"><i class="text-dark fa fa-chevron-circle-left go-back"></i>{:lng('Back')}</a>
                <strong>{:lng('DestinationFolder')}</strong>: {:fm_enc(fm_convert_win(FM_PATH))}
            </p>

            <form action="{:htmlspecialchars(FM_SELF_URL) . '?p=' . fm_enc(FM_PATH) }"
                  class="dropzone card-tabs-container" id="fileUploader" enctype="multipart/form-data">
                <input type="hidden" name="p" value="{:fm_enc(FM_PATH)}">
                <input type="hidden" name="fullpath" id="fullpath" value="{:fm_enc(FM_PATH)}">
                {:token_field()}
                <div class="fallback">
                    <input name="file" type="file" multiple/>
                </div>
                <div class="dz-message" data-dz-message><span>{:lng('Drop files here to upload')}</span></div>
            </form>

            <div class="upload-url-wrapper card-tabs-container hidden" id="urlUploader">
                <form id="js-form-url-upload" class="row row-cols-lg-auto g-3 align-items-center"
                      onsubmit="return upload_from_url(this);" method="POST" action="">
                    <input type="hidden" name="type" value="upload" aria-label="hidden" aria-hidden="true">
                    <input type="url" placeholder="URL" name="uploadurl" required class="form-control" style="width: 80%">
                    {:token_field()}
                    <button type="submit" class="btn btn-primary ms-3" style="max-width: 90%;">{:lng('Upload')}</button>
                    <div class="lds-facebook">
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </form>
                <div id="js-url-upload__list" class="col-9 mt-3"></div>
            </div>
        </div>
    </div>
</div>

{:import_addon_public('js/dropzone.min.js')}

<script>
    Dropzone.options.fileUploader = {
        dictDefaultMessage: "点击或拖动文件",
        chunking: true,
        chunkSize: {$upload_chunk_size},
        forceChunking: true,
        retryChunks: true,
        retryChunksLimit: 3,
        parallelUploads: 1,
        parallelChunkUploads: false,
        timeout: 120000,
        maxFilesize: "{MAX_UPLOAD_SIZE}",
        acceptedFiles: "{$ext_config}",
        init: function () {
            this.on("sending", function (file, xhr, formData) {
                let _path = (file.fullPath) ? file.fullPath : file.name;
                document.getElementById("fullpath").value = _path;
                xhr.ontimeout = (function () {
                    toast('Error: Server Timeout');
                });
            }).on("success", function (res) {
                let _response = JSON.parse(res.xhr.response);

                if (_response.status == "error") {
                    toast(_response.info);
                }
            }).on("error", function (file, response) {
                toast(response);
            });
        }
    }
</script>
{/block}